<template>
  <view class="container">
    <!-- 头部搜索区 -->
    <!-- <view class="search-bar">
      <view class="search-box" @tap="toSearchPage">
        <image class="search-img" src="@/static/images/search.png" />
        <text class="sear-input">搜索</text>
      </view>
    </view> -->
    <!-- 滚动内容区 -->
    <view class="content">
      <!-- 左侧菜单start -->
      <scroll-view class="menu" scroll-y="true">
        <block v-for="(item, index) in categoryList" :key="index">
          <view :class="'menu-item ' + (selIndex == index ? 'active' : '') + ' '" :data-index="index" :data-id="item.categoryId" @tap="onMenuTab">
            {{ item.categoryName }}
          </view>
        </block>
        <view class="ca-empty" v-if="!categoryList || !categoryList.length">{{ categoryList && categoryList.length ? '暂无数据' : '暂无数据' }}</view>
      </scroll-view>

      <!-- 右侧内容start -->
      <scroll-view class="list" scroll-y="true">
        <!-- <view class="adver-map">
          <view class="item-a">
            <image :src="util.checkFileUrl(categoryImg)" mode="widthFix" />
          </view>
        </view> -->
        <!-- 子分类 -->
        <view class="th-cate-con" v-if="subCategoryList.length">
          <block v-for="(thCateItem, index) in subCategoryList" :key="index">
            <view class="sub-category">
              <view class="sub-category-item" :data-categoryid="thCateItem.categoryId" :data-parentid="thCateItem.parentId" @tap="toCatePage">
                <!-- <image class="more-pic" :src="util.checkFileUrl(thCateItem.pic)" mode="widthFix" /> -->
                <img-show class="more-pic" :class-list="['prodimg']" :src="util.checkFileUrl(thCateItem.pic)" />
                <text>{{ thCateItem.categoryName }}</text>
              </view>
            </view>
          </block>
        </view>

        <view class="cont-item empty" v-else>暂无数据</view>
      </scroll-view>
      <!-- 右侧内容end -->
    </view>
  </view>
</template>

<script setup>
import util from '@/utils/util.js';
const categoryList = ref([]);
const subCategoryList = ref([]);
const categoryImg = ref('');
const parentId = ref('');
/**
 * 生命周期函数--监听页面加载
 */
onLoad(() => {
  // 加载分类列表
  http
    .request({
      url: '/category/categoryInfo',
      method: 'GET',
      data: {
        parentId: ''
      }
    })
    .then(({ data }) => {
      categoryImg.value = data[0].pic;
      categoryList.value = data;
      getProdList(data[0].categoryId);
      parentId.value = categoryList.value[0].categoryId;
    });
});

const selIndex = ref(0);
/**
 * 分类点击事件
 */
const onMenuTab = (e) => {
  const index = e.currentTarget.dataset.index;
  getProdList(categoryList.value[index].categoryId);
  parentId.value = categoryList.value[index].categoryId;
  categoryImg.value = categoryList.value[index].pic;
  selIndex.value = index;
};

/**
 * 跳转搜索页
 */
const toSearchPage = () => {
  uni.navigateTo({
    url: '/pages/index/search/search'
  });
};

const getProdList = (categoryId) => {
  // 加载分类列表
  http
    .request({
      url: '/category/categoryInfo',
      method: 'GET',
      data: {
        parentId: categoryId
      }
    })
    .then(({ data }) => {
      subCategoryList.value = data;
    });
};

/**
 * 跳转子分类商品页面
 */
const toCatePage = (e) => {
  const { categoryid } = e.currentTarget.dataset;
  uni.navigateTo({
    url: `/pages/category/categoryProduct/categoryProduct?parentId=${parentId.value}&categoryId=${categoryid}`
  });
};
</script>

<style scoped lang="scss">
@import './category.scss';
</style>
